@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox">
        <div class="ibox-title">
            <h5>链接标签管理</h5>
        </div>
        <div class="ibox-content">
            <div class="m-b">
                <a href="javascript:;" id="btnAddTag" class="btn btn-warning"><i class="fa fa-plus"></i> 新建标签</a>
            </div>
            <table id="tblDataList" class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>标签</th>
                        <th width="200"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($tags as $row)
                    <tr data-id="{{$row->id}}">
                        <td>{{$row->id}}</td>
                        <td>{{$row->tag}}</td>
                        <td>
                            <a href="javascript:;" class="m-r-xs js-edit">
                                <i class="fa fa-pencil-square fa-lg"></i>编辑
                            </a>
                            <a href="javascript:;" class="m-r-xs js-del">
                                <i class="fa fa-times-circle fa-lg"></i>删除
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<script id="tplDataListTr" type="text/html">
    <tr data-id="<%id%>">
        <td><%id%></td>
        <td><%tag%></td>
        <td>
            <a href="javascript:;" class="m-r-xs js-edit">
                <i class="fa fa-pencil-square fa-lg"></i>编辑
            </a>
            <a href="javascript:;" class="m-r-xs js-del">
                <i class="fa fa-times-circle fa-lg"></i>删除
            </a>
        </td>
    </tr>
</script>

<script id="tplTagPannel" type="text/html">
    <div class="row">
        <div class="col-md-4 text-right">
            <i class="fa fa-question-circle fa-4x"></i>
        </div>
        <div class="col-md-8">
            <label class="control-label">标签名</label>
            <input type="text" id="txtTagName" value="<%tag%>" class="form-control" autofocus />
        </div>
    </div>
</script>
@endsection

@section('pagescript')
<script>
    $("#side-menu li[rel='linktag']").addClass("active")
      .parents("ul").addClass("in").parents("li").addClass("active");

    seajs.use('models/linkModel', function(linkModel) {
        $("#btnAddTag").on('click', function(){
            dialog({
                title: '新建',
                content: template("tplTagPannel", {'tag':''}),
                ok: function(){
                    var name = $("#txtTagName").val();
                    if(required_check(name) === false){
                        $("#txtTagName").focus();
                        return false;
                    }
                    linkModel.addTag({"tag":name}, function(data){
                        var html_str = template("tplDataListTr", data);
                        $("#tblDataList").append(html_str);
                    }, failure);
                },
                cancel: true
            }).showModal();
        });

        $("#tblDataList").delegate(".js-edit", 'click', function(){
            var listTr = $(this).parents("tr").eq(0),
                id = listTr.data('id'),
                name = listTr.find("td").eq(1).text();
            dialog({
                title: '编辑',
                content: template("tplTagPannel", {'tag':name}),
                ok: function(){
                    var tag = $("#txtTagName").val();
                    if(tag == name) return true;
                    if(required_check(tag) === false){
                        $("#txtTagName").focus();
                        return false;
                    }
                    linkModel.editTag({"id":id, "tag":tag}, function(){
                        var tr = $("#tblDataList").find("tr[data-id='"+ id +"']").eq(0),
                                html_str = template("tplDataListTr", {"id":id,"tag":tag});
                        tr.after(html_str).remove();
                    }, failure);
                },
                cancel: true
            }).showModal();
        });

        $("#tblDataList").delegate(".js-del", 'click', function(e){
            var id = $(this).parents("tr").eq(0).data('id');
            dialog({
                content: '<i class="fa fa-info-circle"></i> 确定要删除此标签吗？',
                ok: function(){
                    linkModel.delTag({'id':id}, function(){
                        $(e.target).parents("tr").remove();
                    }, failure);
                },
                cancel: true
            }).showModal();
        });
    });
</script>
@endsection
